<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Passing interactions between a Context2D and WebGL stage.</title>

	<link href="../../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../../_assets/css/examples.css" rel="stylesheet" type="text/css"/>

	<style>
		.canvasDiv {
			position: relative;
			width: 960px;
			height: 400px;
		}

		#webGLCanvas {
			position: absolute;
			right: 0;
			top: 0;
			border: 1px solid #0BF;
			background: rgba(0, 180, 255, 0.1);
		}

		#c2dCanvas {
			position: absolute;
			right: 0;
			top: 50px;
			border: 1px solid #0F0;
			background: rgba(0, 255, 0, 0.2);
		}
	</style>

</head>

<body onload="init();">

<header class="EaselJS">
	<h1>Two Stages passing mouse events</h1>

	<p>This example shows a Context2D <code>Stage</code> (green) passing
		unhandled mouse events through to a WebGL <code>StageGL</code>
		(blue) layered below it via <code>Stage.nextStage</code>.
		Notice that the <code>rollover</code> on the bottom stage works even
		while over the top (green) canvas.</p>

	<p>For example, this could be used for layering a rich UI with vector art &
		filters over a highly performant WebGL game engine.</p>
</header>

<div class="canvasDiv">
	<canvas id="webGLCanvas" width="958" height="398"></canvas>
	<canvas id="c2dCanvas" width="958" height="160"></canvas>
</div>

<script src="../../_assets/js/examples.js"></script>

<script src="../../lib/easeljs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
  http://code.createjs.com -->

<script src="../../_assets/libs/tweenjs-NEXT.min.js"></script>

<script src="../../_assets/art/VectorButton.js"></script>

<!-- We also provide hosted minified versions of all CreateJS libraries.
  http://code.createjs.com -->

<script id="editable">
	function init() {
		// load the source image:
		var image = new Image();
		image.src = "../../_assets/art/spritesheet_button.png";
		image.onload = handleImageLoad;
	}

	function handleImageLoad(evt) {
		webGLStage = new createjs.StageGL("webGLCanvas");
		webGLStage.enableMouseOver();

		c2dStage = new createjs.Stage("c2dCanvas");
		c2dStage.enableMouseOver(10);
		c2dStage.nextStage = webGLStage;

		// spritesheet "bitmap" button:
		var spriteSheet = new createjs.SpriteSheet({
			images: [evt.target],
			frames: {width: 300, height: 100},
			animations: { out: 0, over: 1, down: 2 }
		});
		var bitmapButton = new createjs.Sprite(spriteSheet, "up");
		webGLStage.addChild(bitmapButton).set({x: 250, y: 150});
		new createjs.ButtonHelper(bitmapButton);

		// movieclip "vector" button:
		var vectorButton = new lib.VectorButton();
		c2dStage.addChild(vectorButton).set({x: 50, y: 30});
		new createjs.ButtonHelper(vectorButton);

		createjs.Ticker.addEventListener("tick", c2dStage);
		createjs.Ticker.addEventListener("tick", webGLStage);
	}
</script>

</body>
</html>
